<!--
  ~ Copyright [2021-2021] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<form #formElement nzLayout="horizontal" nz-form [formGroup]="validateForm" (ngSubmit)="register()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6">ServiceId</nz-form-label>
    <nz-form-control [nzSpan]="18">
      <input nz-input type="text"
             [ngModel]="instance.serviceId" disabled
             [ngModelOptions]="{standalone: true}"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">InstanceId</nz-form-label>
    <nz-form-control [nzSpan]="18">
      <input nz-input type="text"
             [ngModel]="instance.instanceId" disabled
             [ngModelOptions]="{standalone: true}"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>Schema</nz-form-label>
    <nz-form-control [nzSpan]="18" nzHasFeedback nzErrorTip="Please enter the Schema!">
      <input nz-input type="text" formControlName="schema"
             [(ngModel)]="instance.schema"
             placeholder="http,https..."/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>Host</nz-form-label>
    <nz-form-control [nzSpan]="18" nzHasFeedback nzErrorTip="Please enter the Host!">
      <input nz-input type="text" formControlName="host"
             [(ngModel)]="instance.host"
             placeholder="Please enter the Host!"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>Port</nz-form-label>
    <nz-form-control [nzSpan]="18">
      <nz-input-number formControlName="port" [nzMin]="1" [nzMax]="65534" [nzStep]="1"
                       [(ngModel)]="instance.port"></nz-input-number>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>Weight</nz-form-label>
    <nz-form-control [nzSpan]="18">
      <nz-input-number formControlName="weight" [nzMin]="1" [nzMax]="100" [nzStep]="1"
                       [(ngModel)]="instance.weight"></nz-input-number>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>Is Ephemeral?</nz-form-label>
    <nz-form-control [nzSpan]="18">
      <nz-switch formControlName="ephemeral" [(ngModel)]="instance.ephemeral"
                 nzUnCheckedChildren="fixed"
                 nzCheckedChildren="ephemeral"></nz-switch>
    </nz-form-control>
  </nz-form-item>
  <nz-divider nzText="Metadata (JSON)"></nz-divider>
  <ngx-monaco-editor [options]="{theme:'vs-dark',language:'json'}" [(ngModel)]="metadata"
                     [ngModelOptions]="{standalone: true}"
  ></ngx-monaco-editor>
  <nz-divider></nz-divider>
  <nz-form-item>
    <nz-form-control>
      <button nz-button nzType="primary" [disabled]="!validateForm.valid" nzSize="large" nzBlock>Submit</button>
    </nz-form-control>
  </nz-form-item>
</form>



